<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">

    <title>焦点图波浪切换动画特效</title>
    <!-- 引入字体图标库 -->
    <link rel="stylesheet" href="https://cdn.staticfile.org/font-awesome/4.7.0/css/font-awesome.css">
    <link rel="stylesheet" href="189.css">
</head>

<body>
    <div class="container">
        <div class="slider">
            <div class="btn btn-left">
                <i class="fa fa-angle-left"></i>
            </div>
            <div class="btn btn-right">
                <i class="fa fa-angle-right"></i>
            </div>
            <svg class="svg1">
                <!-- cx：圆点的x坐标  cy：圆点的y坐标  r：圆的半径 -->
                <circle class="circle1" cx="34px" cy="50%" r="20"/>
                <circle class="circle2" cx="34px" cy="50%" r="100"/>
                <circle class="circle3" cx="34px" cy="50%" r="180"/>
                <circle class="circle4" cx="34px" cy="50%" r="260"/>
                <circle class="circle5" cx="34px" cy="50%" r="340"/>
                <circle class="circle6" cx="34px" cy="50%" r="420"/>
                <circle class="circle7" cx="34px" cy="50%" r="500"/>
                <circle class="circle8" cx="34px" cy="50%" r="580"/>
                <circle class="circle9" cx="34px" cy="50%" r="660"/>
            </svg>
            <svg class="svg2">
                <!-- cx：圆点的x坐标  cy：圆点的y坐标  r：圆的半径 -->
                <circle class="circle1" cx="648px" cy="50%" r="20"/>
                <circle class="circle2" cx="648px" cy="50%" r="100"/>
                <circle class="circle3" cx="648px" cy="50%" r="180"/>
                <circle class="circle4" cx="648px" cy="50%" r="260"/>
                <circle class="circle5" cx="648px" cy="50%" r="340"/>
                <circle class="circle6" cx="648px" cy="50%" r="420"/>
                <circle class="circle7" cx="648px" cy="50%" r="500"/>
                <circle class="circle8" cx="648px" cy="50%" r="580"/>
                <circle class="circle9" cx="648px" cy="50%" r="660"/>
            </svg>
            <div class="slide slide1 active"></div>
            <div class="slide slide2"></div>
            <div class="slide slide3"></div>
            <div class="slide slide4"></div>
        </div>
    </div>
</body>

</html>

<script src="189.js"></script>